<template>
  <div class="TalentResume">
    <div class="title">服务管理-人才简历管理</div>
    <div class="Ltop">
      <el-radio-group v-model="cType">
        <el-radio-button class="top-radio-button" :label="0" style="margin: 0 20px">待沟通</el-radio-button>
        <el-radio-button class="top-radio-button" :label="1" style="margin-right:20px">已沟通</el-radio-button>
      </el-radio-group>
    </div>
    <div class="Lcontent">
      <div class="Lleft">
        <!-- <div v-for="item in companyName">
                    <div @click="doshowJob(item.id)">{{item.companyName}}</div>
        </div>-->
        <el-radio-group v-model="companyId" @change="getCompanyId">
          <el-radio-button
            v-for="(item,index) in companyName"
            :key="index"
            :label="item.id"
          >{{item.companyName.length>12 ? item.companyName.slice(0,12) + '...' : item.companyName}}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="LMain">
        <!-- <div v-for="item2 in jobName">
                    <div @click="doshowTalent(item2.id)">{{item2.jobTitle}}</div>
        </div>-->
        <el-radio-group v-model="jobId" @change="getJobId">
          <el-radio-button
            v-for="(item,index) in jobName"
            :key="index"
            :label="item.id"
          >{{item.jobTitle.length>12 ? item.jobTitle.slice(0,12) + '...' : item.jobTitle}}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="LRight">
        <div class="bigS">
          <div>人才姓名</div>
          <div>执业类型(人才)</div>
          <div>自荐时间</div>
          <div>操作</div>
        </div>
        <div v-for="item3 in talentName" :key="item3.jrrID">
          <div>{{item3.name}}</div>
          <div>
            <el-popover placement="top-start" width="200" trigger="hover">
              <div>{{item3.content}}</div>
              <div
                slot="reference"
              >{{item3.content.length >16 ? item3.content.slice(0,16)+ '...' : item3.content}}</div>
            </el-popover>
          </div>
          <div>{{item3.dtime}}</div>
          <div>
            <el-button
              type="text"
              size="small"
              @click="doPersonnel(item3.jrrID)"
            >{{ cType == 0 ? '处理' : '查看'}}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TalentResume',
  data() {
    return {
      cType: 0,
      showType: '1',
      companyName: [
        // {
        //     companyName:'123'
        // }
      ],
      jobName: [
        // {
        //     jobTitle:'147'
        // }
      ],
      talentName: [
        // {
        //     name:'458',
        //     content:'369',
        //     intime:'85214'
        // }
      ],
      companyId: '',
      jobId: '',
      talentId: 0
    }
  },
  methods: {
    doChangeTabs() {
      const params = {
        state: this.cType,
        showType: this.showType
      }
      this.lAxios({
        method: 'post', //方法
        url: '/platform/getEnsure.do', //路径，基础路径在main.js里面配置
        params
      })
        .then(res => {
          //成功的回调函数
          console.log(res.data.data.talentName)
          this.companyName = res.data.data.companyName || []
          let ret = this.companyName.filter(item => item.id == this.companyId)
          if (this.companyId == '' || ret.length < 1) {
            this.companyId = this.companyName[0] ? this.companyName[0].id : 0
          }
          this.doshowJob()
          // this.jobName = res.data.data.jobName || []
          // this.jobId = this.jobName[0] ? this.jobName[0].id : 0
          // this.talentName = res.data.data.talentName || []
          // this.talentId = this.talentName[0] ? this.talentName[0].id : 0
        })
        .catch(err => {
          //失败的回调函数
          console.log(err)
        })
    },
    //点击企业名字获取职位信息
    doshowJob() {
      this.lAxios({
        method: 'post', //方法
        url: '/platform/getJobName.do', //路径，基础路径在main.js里面配置
        params: {
          comId: this.companyId,
          state: this.cType,
          showType: this.showType
        }
      })
        .then(res => {
          //成功的回调函数
          this.jobName = res.data.data.jobName || []
          let ret = this.jobName.filter(item => item.id == this.jobId)
          if (this.jobId == '' || ret.length < 1) {
            this.jobId = this.jobName[0] ? this.jobName[0].id : 0
          }
          this.doshowTalent()
          // this.talentName = res.data.data.talentName || []
          // this.talentId = this.talentName[0] ? this.talentName[0].id : 0
        })
        .catch(err => {
          //失败的回调函数
          console.log(err)
        })
    },
    //点击职位名字获取人才信息
    doshowTalent() {
      this.lAxios({
        method: 'post', //方法
        url: '/platform/getTalentName.do', //路径，基础路径在main.js里面配置
        params: {
          //传参
          comId: this.companyId,
          jobId: this.jobId,
          state: this.cType,
          showType: this.showType
        }
      })
        .then(res => {
          //成功的回调函数
          console.log(res.data.data)
          this.talentName = res.data.data
          this.talentId = this.talentName[0].id
        })
        .catch(err => {
          //失败的回调函数
          console.log(err)
        })
    },
    doPersonnel(obj) {
      this.$router.push({
        path: '/Personnel/1',
        query: {
          jrrId: obj,
          comId: this.companyId,
          jobId: this.jobId,
          showType: this.showType,
          state: this.cType
        }
      })
    },
    getCompanyId(val) {
      console.log('切换' + val)
      this.companyId = val
      this.jobId = ''
      this.doshowJob()
    },
    getJobId(val) {
      console.log('jobId' + val)
      this.jobId = val
      this.doshowTalent()
    }
  },
  watch: {
    cType() {
      this.companyId = ''
      this.jobId = ''
      this.doChangeTabs()
    }
    // ,
    // companyId() {
    //   this.doshowJob()
    // },
    // jobId() {
    //   this.doshowTalent()
    // }
  },
  mounted() {
    this.doChangeTabs()
  },
  activated() {
    this.doChangeTabs()
  }
}
</script>
<style lang="scss">
.TalentResume {
  .el-radio-button__inner {
    width: 100%;
    border-radius: 4px !important;
    border: none;
  }
  .Lcontent .el-radio-group {
    width: 100%;
    height: auto;
    margin: 0;
    .el-radio-button {
      display: block;
      width: 100%;
      border: 0;
    }
  }
}
.top-radio-button {
  .el-radio-button__inner {
    width: 125px;
    height: 50px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
  }
}
</style>

<style lang="scss" scoped>
.TalentResume {
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  font-size: 14px;
  overflow-x: hidden;
}
.bigS {
  color: #1f2e4d;
  font-weight: 800;
}
.title {
  height: 33px;
  line-height: 33px;
}
.el-button--text {
  // border: 1px solid #3377ff;
  font-size: 14px;
  height: 40px;
  width: 70px;
  color: #3377ff;
}
.Ltop {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px 0 20px 0;
}

.Ltop > button {
  height: 37px;
  border: 1px solid #797979;
  /*background-color: #f2f2f2;*/
  font-size: 14px;
  margin-right: 10px;
}

.Ltop > button:nth-child(1) {
  width: 148px;
  /*background-color: #199ed8;*/
}

.Ltop > button:nth-child(2) {
  width: 87px;
}

.active {
  background-color: #199ed8;
  color: #333;
}

.Lcontent {
  width: 100%;
  min-height: 70vh;
  display: flex;
  flex-direction: row;
}

.Lleft {
  width: 20%;
  min-height: 640px;
  background-color: #fff;
  margin-right: 10px;
}

.LMain {
  width: 20%;
  min-height: 640px;
  background-color: #fff;
  margin-right: 10px;
}

.LRight {
  width: 60%;
  min-height: 640px;
  background-color: #fff;
  padding: 0 30px;
  color: #1f2e4d;
}
.active {
  background-color: #199ed8;
  color: #333;
}
.Lleft > div,
.LMain > div,
.LRight > div {
  width: 96%;
  // margin-left:2%;
  // line-height: 52px;
  height: 30px;
  text-align: center;
  // background-color: #f2f2f2;
  margin-top: 5px;
  margin-bottom: 5px;
}
// .Lleft>div:hover,.LMain>div:hover,.LRight>div:hover{
//     background-color: #f7f9fc;
// }

.Lleft > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.LRight > div {
  width: 98%;
  margin-left: 1%;
  display: flex;
  flex-direction: row;
  padding: 5px 0;
  &:first-child:hover {
    background-color: #fff;
  }
  div {
    flex: 1;
  }
  button {
    height: 25px;
    width: 70px;
    padding-top: 0;
  }
}
.Ltop {
  .el-radio-button__inner {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
}
</style>
